@import '~styles/settings.scss';

$dd-height: rem(30px);
$dd-height-large: rem(40px);
$dd-font-size: rem(12px);
$dd-font-size-large: rem(16px);

.theme-dropdown-native {
  .select-wrapper {
    border: 1px solid $green-gfw;
    border-radius: 20px;
    position: relative;
    width: fit-content;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-content: center;
    height: $dd-height;

    select {
      border: 0;
      background-color: transparent;
      color: $slate;
      font-family: $font-family-1;
      font-size: $dd-font-size;
      appearance: none;
      padding: 0 rem(28px) 0 rem(15px);
      z-index: 2;
      height: 100%;
      cursor: pointer;
      position: relative;
      line-height: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &::-ms-expand {
        display: none;
      }

      &:focus {
        outline: none;
      }
    }

    &.multiple {
      height: rem(120px);

      select {
        padding: 0;
      }

      option {
        padding: rem(5px) rem(10px);
      }
    }
  }

  .arrow-icon {
    position: absolute;
    right: rem(12px);
    height: 100%;
    width: 10px;
    z-index: 1;
    fill: $green-gfw;
  }

  &.large {
    .select-wrapper {
      height: $dd-height-large;

      select {
        font-size: $dd-font-size-large;
        line-height: 28px;
      }
    }
  }
}
